<template>
	<div id="index">
		<h1 class="title">数独</h1>
		<div style="padding: 5%;">
			<div id="container" class="container grid">
				<div class="row" v-for="(item,index) in sudoku" :class="[{'girdRow':index%3==2}]">
					<span @click="fillShow(item_,index,index_)" v-for="(item_,index_) in item" :class="[{'girdCol':index_%3==2,'fixed':sudoku_[index][index_]!=0,'value':item_!=0 , 'error':!isComplete[index][index_] }]">
						{{item_}}
					</span>
				</div>
			</div>
		</div>
		
	
		<!--按钮组-->
		<div id="dashboard" class="dashboard">
			<div class="buttons">
				<button id='check' @click="check">检查</button>
				<button id='check'>重置</button>
				<button id='check'>种族</button>
				<button id='check'>检查</button>

			</div>
		</div>

		<!--弹出面板-->
		<div id="popupNumber" v-if="isFill">
			<div class="row">
				<span class="fixed" @click="fillNum(1)">1</span>
				<span class="fixed" @click="fillNum(2)">2</span>
				<span class="fixed" @click="fillNum(3)">3</span>
			</div>
			<div class="row">
				<span class="fixed" @click="fillNum(4)">4</span>
				<span class="fixed" @click="fillNum(5)">5</span>
				<span class="fixed" @click="fillNum(6)">6</span>
			</div>
			<div class="row">
				<span class="fixed" @click="fillNum(7)">7</span>
				<span class="fixed" @click="fillNum(8)">8</span>
				<span class="fixed" @click="fillNum(9)">9</span>
			</div>
		</div>
	</div>

</template>

<script>
	import toolkit from '../js/toolkit.js';
	import Generator from '../js/generateor.js'
	import Check from '../js/checker.js';
	import sudoku from '../js/sudoku.js';
	import $ from 'jquery';
	export default {
		data() {
			return {
				list: [],
				matrix: [], //答案
				sudoku: [], //谜面
				sudoku_:[],
				isFill:false,
				isComplete:[],
				currtPos:{
					rowIndex:0,
					colIndex:0,
				}
			}
		},
		mounted() {
			this.isComplete = toolkit.makeMatrix(true)
			let list = Generator.generate()
			this.matrix = list;
			//			console.table(list)
			this.sudoku_ = sudoku.begin(this.matrix);
			this.sudoku = this.sudoku_.map(row=>row.map(i=>i))
			console.log(this.sudoku_)

			setTimeout(() => {
				let w = $('#container .row span').width()
				$('#container .row span').height(w).css({
					lineHeight: w + 'px'
				})
				$('.isBlock').addClass('isBlock_')
			}, 10)

		},
		methods: {
			check(){
				this.isComplete = Check.check(this.sudoku) ;
				console.table(this.isComplete)
			},
			fillShow(num,rowIndex,colIndex){
				
				this.isFill = true;
				this.currtPos = {rowIndex,colIndex}
//				this.currtPos.rowIndex = rowIndex;
//				this.currtPos.colIndex = colIndex;
			},
			fillNum(num){
				this.sudoku[this.currtPos.rowIndex].splice(this.currtPos.colIndex,1,num);
				console.table(this.sudoku)
			}
		}
	}
</script>

<style lang="less">
	@shadowBottom: 0 6px 3px rgba(48, 48, 48, 192);
	@shadowTop: 0 -6px -3px rgba(48, 48, 48, 192);
	div {
		box-sizing: border-box;
	}
	
	#index {
		background-color: #eeeeee;
		-webkit-user-select: none;
		height: 100vh;
		background-color: #f4f4f4;
	}
	
	.hidden {
		display: none;
	}
	
	.title {
		background-color: steelblue;
		box-shadow: @shadowBottom;
		color: #fff;
		margin-top: 0;
	}
	#container{
			@border: 1px solid rgba(0, 0, 0, .1);
			@borderDeep: 1px solid rgba(0, 0, 0, 1);
			.row {
				display: flex;
				border-bottom: @border;
				&:nth-of-type(1) {
					border-top: @borderDeep;
				}
				>span {
					display: inline-block;
					box-sizing: border-box !important;
					cursor: pointer;
					background-color: #FFFFFF;
					color: #fff;
					text-align: center;
					flex: 1;
					/*padding: 6px 0;*/
					border-right: @border;
					&:nth-of-type(1) {
						border-left: @borderDeep;
					}
					&.error{
						background-color: rgb(255,0,0);
						color: rgb(255,0,0);
					}
					&.fixed {
						background-color: #f4f4f4;
						color: black;
						
					}
					&.value{
						color: black;
					}
				}
			}
			
			.girdRow {
				border-bottom: 1px solid rgba(0, 0, 0, 1);
			}
			
			.girdCol {
				border-right: 1px solid rgba(0, 0, 0, 1) !important;
			}
	}

	
	.dashboard {
		/*position: absolute;*/
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 20px 0;
		.buttons {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: steelblue;
			button {
				float: left;
				width: 25%;
				padding: 10px 0;
				color: white;
				border: 1px solid #ccc;
				background: transparent;
				border-right: none;
				&:last-child {
					border: 1px solid #ccc;
				}
			}
		}
	}
	#popupNumber{
		width: 120px;
		#container();
		span{
			height: 40px;
			line-height: 40px;
		}
	}
</style>